<template>
  <div class="operation-content2">
    <div class="operation-row2">
      <div class="operation-left-part">
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">中央空调</span>
            <span class="operation-more">更多>>></span>
          </p>
          <div class="operation-ac-row">
            <span>水冷机组</span>
            <div>
              <p class="operation-ac-point"></p>
              <p>运行中</p>
            </div>
            <div>
              <p class="operation-ac-point operation-ac-point1"></p>
              <p>正常</p>
            </div>
            <span class="operation-ac-mode">自动</span>
            <p>实时负荷：<span class="operation-ac-data">1000</span>KW</p>
          </div>
          <div class="operation-ac-row">
            <span>换热机组</span>
            <div>
              <p class="operation-ac-point"></p>
              <p>运行中</p>
            </div>
            <div>
              <p class="operation-ac-point operation-ac-point1"></p>
              <p>正常</p>
            </div>
            <span class="operation-ac-mode">自动</span>
            <p>实时负荷：<span class="operation-ac-data">1000</span>KW</p>
          </div>
          <div class="operation-ac-row">
            <span>风冷机组</span>
            <div>
              <p class="operation-ac-point"></p>
              <p>运行中</p>
            </div>
            <div>
              <p class="operation-ac-point operation-ac-point2"></p>
              <p>故障</p>
            </div>
            <span class="operation-ac-mode">自动</span>
            <p>实时负荷：<span class="operation-ac-data">1000</span>KW</p>
          </div>
          <div class="operation-ac-row">
            <span>VRV机组</span>
            <div>
              <p class="operation-ac-point"></p>
              <p>运行中</p>
            </div>
            <div>
              <p class="operation-ac-point operation-ac-point1"></p>
              <p>正常</p>
            </div>
            <span class="operation-ac-mode">自动</span>
            <p>实时负荷：<span class="operation-ac-data">1000</span>KW</p>
          </div>
          <div class="operation-ac-row">
            <span>当前告警</span>
            <span class="operation-warn-data">0条</span>
            <span>详情>>></span>
          </div>
        </div>
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">配电系统</span>
            <span class="operation-more">更多>>></span>
          </p>
          <div class="operation-card-box operation-card-box2">
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>安全运行</p></div>
                <div class="blue-card-num">{{ safeDays }}天</div>
              </div>
            </div>
            <div class="blue-box">
              <div class="blue-card-p">
                <div class="operation-date"><p>当前负荷总量</p><p >{{ allload.time }}</p></div>
                <div class="blue-card-num">{{ allload.load }}<span>{{ allload.unit }}</span></div>
              </div>
            </div>
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>监测点位</p></div>
                <div class="blue-card-num">{{ meansureCount.allMeasureCount }} <span>个</span></div>
                <div><i class="fa fa-check-circle" aria-hidden="true"></i> {{ meansureCount.allMeasureCount-meansureCount.alarmMeasureCount-meansureCount.offlineMeasureCount }}</div>
                <div><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ meansureCount.alarmMeasureCount }}</div>
              </div>
            </div>
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>当前告警</p></div>
                <div class="operation-warn-data">{{ alarmCount||'0' }} <span>条</span></div>
                <div>详情 >></div>
              </div>
            </div>
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>配电房环境</p></div>
                <div>温度：{{ environment.temperture|| '-' }}℃</div>
                <div>湿度：{{ environment.humidity||'-' }}%</div>
              </div>
            </div>
          </div>
        </div>
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">末端应用系统</span>
            <span class="operation-more">更多>>></span>
          </p>
          <div class="blue-card-p">
            <div><p>末端控制器</p></div>
            <div class="blue-card-num">231 <span>个</span></div>
            <div><i class="fa fa-check-circle" aria-hidden="true"></i> 227</div>
            <div><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 2</div>
          </div>
          <p class="operation-eq-row">
            <span><span  class="operation-eq-data">{{deviceRunningInfo.ac}}</span>个房间开着<span class="operation-eq-img"></span></span>
            <span>总用时<span class="operation-eq-data">{{deviceRunningInfo.actime}}</span>个小时</span>
          </p>
          <p class="operation-eq-row">
            <span><span class="operation-eq-data">{{deviceRunningInfo.light}}</span>个房间开着<span class="operation-eq-img operation-eq-img-light"></span></span>
            <span>总用时<span class="operation-eq-data">{{deviceRunningInfo.lighttime}}</span>个小时</span>
          </p>
          <p class="operation-eq-row">
            <span><span class="operation-eq-data">{{deviceRunningInfo.socket}}</span>个房间开着<span class="operation-eq-img operation-eq-img-socket"></span></span>
            <span>总用时<span class="operation-eq-data">{{deviceRunningInfo.sockettime}}</span>个小时</span>
          </p>
          <p class="operation-eq-row">
            <span><span class="operation-eq-data">{{deviceRunningInfo.fan}}</span>个房间开着<span class="operation-eq-img operation-eq-img-fan"></span></span>
            <span>总用时<span class="operation-eq-data">{{deviceRunningInfo.fantime}}</span>个小时</span>
          </p>
        </div>
      </div>
      <div class="operation-middle-part">
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">近30天工单概况</span>
          </p>
          <div class="operation-main">
            <div class="operation-left-list">
              <li>不紧急工单：<span>{{urgentCount['不紧急']||0}}</span>条</li>
              <li>一般工单：<span>{{urgentCount['一般']||0}}</span>条</li>
              <li>紧急工单：<span>{{urgentCount['紧急']||0}}</span>条</li>
              <li>特急工单：<span>{{urgentCount['特急']||0}}</span>条</li>
            </div>
            <div class="operation-right">
              <div class="demo_line_03"><b></b><span>共{{allWorkOrderCount}}条工单</span><b></b></div>
              <div class="operation-right-data">
                <div><p class="blue-title-gray">{{statusCount['处理完成']||0}}</p><p class="blue-title-main">已处理</p></div>
                <div><p class="blue-title-gray">{{statusCount['待指派']||0 + statusCount['已指派']||0 }}</p><p class="blue-title-main">待处理</p></div>
                <div><p class="blue-title-gray">{{statusCount['处理中']||0}}</p><p class="blue-title-main">处理中</p></div>
                <div><p class="blue-title-gray">{{statusCount['已忽略']||0}}</p><p class="blue-title-main">已关闭</p></div>
              </div>  
            </div>
          </div>
        </div>
        <div class="blue-box operation-table operation-table2">
            <table class="blue-table" id="table1">
              <thead>
                <tr>
                  <th>故障内容/位置</th>
                  <th>申请时间</th>
                  <th>紧急程度</th>
                  <th>处理人</th>
                  <th>当前状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,key) in myWorkorder" :key="key">
                  <td>{{item.workTitle+'/'+item.place}}</td>
                  <td>{{item.createDate}}</td>
                  <td>{{item.isUrgent}}</td>
                  <td>{{item.solveUser}}</td>
                  <td><span class="operation-static" 
                    :class="{'operation-static-success': item.workStatus==='处理完','operation-static-warning': item.workStatus==='待指派'}"
                    >{{item.workStatus}}</span></td>
                </tr>
              </tbody>
            </table>
        </div>
      </div>
      <div class="operation-right-part">
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">监测点运行状况</span>
          </p>
          <div class="operation-card-box">
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>区域用电监测点位</p></div>
                <div class="blue-card-num">{{measureNum.buildAll}} <span>个</span></div>
                <div><i class="fa fa-check-circle" aria-hidden="true"></i> {{measureNum.buildNormal}}</div>
                <div><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{measureNum.buildAll-measureNum.buildNormal}}</div>
              </div>
            </div>
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>部门用电监测点位</p></div>
                <div class="blue-card-num">{{measureNum.officeAll}} <span>个</span></div>
                <div><i class="fa fa-check-circle" aria-hidden="true"></i> {{measureNum.officeNormal}}</div>
                <div><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{measureNum.officeAll-measureNum.officeNormal}}</div>
              </div>
            </div>
            <div class="blue-box">
              <div class="blue-card-p">
                <div><p>分项用电监测点位</p></div>
                <div class="blue-card-num">{{measureNum.itemAll}} <span>个</span></div>
                <div><i class="fa fa-check-circle" aria-hidden="true"></i> {{measureNum.itemNormal}}</div>
                <div><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{measureNum.itemAll-measureNum.itemNormal}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">近30天异常分布</span>
          </p>
          <div id="operation-chart">
            <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
          </div>
        </div>
        <div class="blue-box operation-box">
          <p class="blue-box-title ">
            <span class="blue-title-main">近半年运维KPI</span>
          </p>
          <table class="blue-table operation-table3">
            <thead>
              <tr>
                <td>员工</td>
                <td>工单总数</td>
                <td>完成率</td>
                <td>平均每单耗时</td>
                <td>好评率</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,key) in workInfo" :key="key">
                <td>{{item.name}}</td>
                <td>{{item.allCount}}</td>
                <td>{{item.resolved}}%</td>
                <td>{{item.avgTime}}小时</td>
                <td>{{item.evaluate}}%</td>
              </tr>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'hospitalF',
    data () {
      return {
        deviceCount: {"设备资产总数":0,"纳入监管设备数量":0,"在线设备数量":0,"离线设备数量":0},
        urgentCount: {"不紧急":0,"一般":0,"紧急":0,'特急':0},
        workLog: [],
        workInfo: [],
        myWorkorder: [],
        statusCount:[],
        deviceRunningInfo:{ac:0,actime: 1812,fan: 0,fantime: 0,light: 123,lighttime: 645,socket: 187,sockettime: 0},
        measureNum: {itemNormal: 503, buildAll: 57, officeAll: 54, officeNormal: 51, itemAll: 621, buildNormal: 53},
        safeDays: '--',
        allload: {load:'--', time: "2018-08-07 00:00:00"},
        meansureCount: {},
        alarmCount: 0,
        environment: {},
        chartTheme: {},
        chart1: {
          color: ["#048eff", "#00e7d0", "#3f38ff", "#8e3fff", "#dd00c5"],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            data: ["照明", "空调", "插座"],
            orient: "vertical",
            left: 40,
            top: "center"
          },

          series: [
            {
              name: "开启量",
              type: "pie",
              radius: "55%",
              center: ["60%", "50%"],
              data: [
                { value: 435, name: "照明" },
                { value: 310, name: "插座" },
                { value: 274, name: "空调" }
              ].sort(function(a, b) {
                return a.value - b.value;
              }),
              labelLine: {
                normal: {
                  lineStyle: {
                    color: "#414474"
                  },
                  length: 10,
                  length2: 20
                }
              }
            }
          ]
        },
      }
    },
    mounted: function () {
      this.$http("/vqdisplay/static/HospitalChartTheme.json").then(response => {
        this.chartTheme = response.data;
      });
      this.getData()
      this.getData2()
    },

    
  computed: {
    allWorkOrderCount: function() {
      let count = 0;
      if (this.statusCount)
        for (let key in this.statusCount) count += this.statusCount[key];
      return count;
    }
  },
    methods: {
      getData: function () {
        this.$http('/vqdisplay/maintenance/data')
        .then( (response) => {
          if (response.status===200) {
            let _data = response.data.body
            console.log(_data)
            this.deviceCount = _data.device_count
            this.urgentCount = JSON.stringify(_data.urgent_count) !== '{}'?_data.urgent_count:this.urgentCount
            this.statusCount = _data.status_count
            this.workLog =  _data.work_log
            this.workInfo =  _data.work_info
            this.myWorkorder =  _data.my_workorder
            this.deviceRunningInfo =  _data.deviceRunningInfo
            this.measureNum =  _data.measureNum
            this.chart1.legend.data = _data.worktype_pie.legend;
            this.chart1.series[0].data = _data.worktype_pie.series;
          }
        })
      },
      getData2: function () {
        this.$http('/vqdisplay/substation/data')
        .then( (response) => {
          if (response.status===200) {
            let _data = response.data.body
            this.safeDays = _data.safe_days.days
            this.allload =  _data.allload
            this.meansureCount =  _data.meansure_count
            this.alarmCount =  _data.alarm_count.alarmCount
            this.environment = _data.environment
          }
        })
      }
    }
  }
</script>
<style scoped>
  @import '../../../style/operation.css';
  .echarts {
    height: 250px;
    width: 100%;
  }
</style>